<template>
    <Echart
            :options="options"
            id="bottomLeftChart"
            :height="height"
            width="95%"
            v-bind:style="cstyle"
    ></Echart>
</template>

<script>
  import Echart from '@/common/echart'
  const labelOption = {
    show: true,
    position:'insideBottom',
    distance: 60,
    align: 'center',
    verticalAlign:'middle',
    rotate: 90,
    color:'white',
    formatter: '{a}  {c}%',
    fontSize: 16,
    rich: {
      name: {}
    }
  };
  export default {
    data () {
      return {
        options: {},
      };
    },

    components: {
      Echart,
    },
    props: {
      cdata: {
        type: Object
      },
      height:{
        default:'300px'
      },
      cstyle:{
        type:Object
      },
      showValue:{
        type:Boolean,
        default:true
      }
    },
    watch: {

      showValue:{
        handler(newValue){
          labelOption.show=newValue
        },
        immediate: true
      },
      cdata: {
        handler (value) {
          this.options={
            tooltip: {
              trigger: "item",
              formatter: '{b} {c}',
            },

            //图例组件
            legend: {
              //orient: 'vertical',
              x:'top',
              padding:[20,20,0,0],
              selectedMode: false,
              icon:"circle",
              top: '3%',
              align:'left',
              textStyle:{
                fontSize:18,
                color: 'rgba(255, 255, 255, 0.6)',
              }
            },
            title: {
              text: value.title,
              left: 'center',
              textStyle:{
                color: '#01aaff'
              }
            },
            //全局颜色样式
            //color: ["#C6E2FF", "#76B5F5", "#409EFF", "#166AC1","#68A4E2","#68A4E2"],
            series: [
              {
                name:value.title,
                type: "pie",
                radius: ["15%", "32%"],//圆环大小
                //center: ["44%", "50%"],//图表的位置
                avoidLabelOverlap: false,//是否启用防止标签重叠策略
                hoverAnimation:false,//动画效果
                label: {
                  formatter: '{b}{c}',
                  textStyle:{
                    fontSize:15
                  }
                },
                // 指示折现
                labelLine: {
                  normal: {
                    show: true,
                    legend: 8,//第一条折现
                    legend2: 15,//第二条折现
                    lineStyle: {
                      color: "#166AC1"//折现颜色
                    },
                  }
                },
                data:value.data
              }
            ]
          }
        },
        immediate: true,
        deep: true
      },
    },
  }

</script>

<style lang="scss" scoped>
$box-height: 100%;
$box-width: 100%;
</style>
